<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎注册</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<style>
			span{
				top: 100%;
				left: 20%;
			}
			[type=text]::placeholder,[type=password]::placeholder{
				color:rgb(170,170,171);
			}
			body{
				background: url("img/wallhaven-e7jj6r.jpg") no-repeat;
				background-attachment: fixed;
				background-size: cover;
			}
		</style>
	</head>
	<body class="d-flex vh-100 justify-content-center align-items-center vw-100">
		<a href="./Home.html" class="text-white text-decoration-none font-weight-bold">&leftarrow;切换至首页</a>
		<div class="shadow p-4 w-50 container border" style="border-radius: 10px;background-color: rgba(255, 255, 255, 70%);">
			<form action="">
				<h1 class="font-weight-bold" title="恭喜你发现了小彩蛋:)">
					欢迎加入NIKE
				</h1>
				<p style="color: rgb(170,170,171);">已有账号?<a href="#" class=" mx-2">登录</a></p>
				<div class="input-group w-75 d-flex justify-content-center mx-auto my-5 position-relative">
					<label for="" class="my-auto">用户名：</label>
					<input type="text" class="form-control" placeholder="请设置用户名">
					<span class="position-absolute"></span>
				</div>
				
				<div class="input-group w-75 d-flex justify-content-center mx-auto my-5 position-relative">
					<label for="" class="my-auto">手机号：</label>
					<input type="text" class="form-control" placeholder="可用于登录和找回密码">
					<span class="position-absolute"></span>
				</div>
				
				<div class="input-group w-75 d-flex justify-content-center mx-auto my-5 position-relative">
					<label for="" class="my-auto">密码：&ensp;&ensp;</label>
					<input type="password" class="form-control" placeholder="请设置登录密码">
					<span class="position-absolute"></span>
				</div>
				<div class="input-group w-75 d-flex justify-content-center mx-auto my-5 position-relative">
					<label for="" class="my-auto">验证码：</label>
					<input type="text" class="form-control" maxlength="4" placeholder="请输入验证码">
					<span class="position-absolute"></span>
					<a href="#" id="yanzheng" class="btn input-group-append ml-2 border">获取验证码</a>
				</div>
				
				<div class="form-group d-flex justify-content-center">
					<button type="submit" class="btn btn-primary w-100">注册</button>
				</div>
				
				<div class="form-check-inline d-flex justify-content-center">
					<input type="checkbox">
					<label for="" class="form-check-label">我已同意注册协议</label>
				</div>
			</form>
		</div>
		<script>
			//创建正则表达式，错误情况的信息
			const regs = [/^\w{6,16}$/,/^1\d{10}$/,/^\w{8,30}$/,/\d{5}/]
			const wrong =['请输入6-16位</br>大小写字母，数字，"-"，"_"','请输入正确的手机号格式</br>11位号码,以1开头','密码为8-30位的密码','请输入4位正确验证码']
			
			 
			//获取form内的选项
			const inputs = document.querySelectorAll('[placeholder]');
			
			
			//判断表单内容的正确函数
			function right_wrong(i){
				if(regs[i].test(inputs[i].value) == false){
					inputs[i].nextElementSibling.innerHTML = wrong[i];
					inputs[i].nextElementSibling.classList.add('text-danger');
					inputs[i].nextElementSibling.classList.remove('text-success');
					return false
				}else{
					inputs[i].nextElementSibling.innerHTML = '正确';
					inputs[i].nextElementSibling.classList.add('text-success');
					inputs[i].nextElementSibling.classList.remove('text-danger');
					return true
				}
			}
			
			
			//当表单提交时，迭代表单内容
			document.querySelector('form').addEventListener('submit',function(e){
				e.preventDefault();
				
				//迭代表单内容并判断满足条件
				let a = []
				for(let i = 0 ; i < inputs.length ; i++){
					a.push(right_wrong(i))
				}
				a.includes(false) == true ? a = false : a = true
				
				//只有当同意协议并且满足表单内容才可注册成功
				if(document.querySelector('form>div:last-of-type>input').checked == true && a == true){
					alert('注册成功')
					//只有注册成功时才可刷新页面
					location.reload()
				}else if(document.querySelector('form>div:last-of-type>input').checked == true && a == false){
					alert('有选项不符合')
				}else{
					alert('您未同意注册协议')
				}
				
			})
			
			//给表单添加change事件，如果值发生改变则触发，进行正则判断
			for(let i = 0 ; i < inputs.length ; i++){
				inputs[i].addEventListener('input',function(e){
					right_wrong(i)
				})
			}
			
			//获取验证码事件
			document.querySelector("#yanzheng").addEventListener('click',function(e){
				const random = (parseInt(Math.random() * 10000)).toString()
				while (true){
					//当获得的验证码位数小于4时，前面自动补0
					if(random.length < 4){
						random = '0' + random
					}else{
						alert('收到的验证码是：' + random)
						break;
						}
				}
				//创建精准匹配的正则
				regs[3] = new RegExp(`^${random}$`)
			})
			

		</script>
	</body>
</html>